<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            position: relative;
            margin-left: 200px;
        }
        #content{
            position: relative;
            width: 400px;
            height: 400px;
        }
        #shadow {
            height: 50px;
            width: 50px;
            /* border-radius: 50%; */
            position: absolute;
            background-color: rgba(66, 166, 166, 0.4);
            left: 0;
            top: 0;
            /* overflow: hidden; */
            display: none;
            z-index: 99;
        }
        #smallImg{
            height: 400px;
            width: 400px;
        }

        #bigImg {
            height: 800px;
            width: 800px;
            display: block;
            position: absolute;
            /* left: -400px; */
        }
        #bigContent {
            position: absolute;
            height: 100px;
            width: 100px;
            /* left: 500px; */
            top: 0;
            overflow: hidden;
            /* display: none; */
            border: 1px solid black;
            border-radius: 50%
        }
    </style>
</head>
<body>
        <div id="wrap">
                <div id="content">
                    <img src="img/small1.jpg" id="smallImg"/>
                    <div id="shadow"></div>
                    <div id="bigContent">
                            <img src="img/big1.jpg" id="bigImg"/>
                        </div>
                </div>
               
        </div>
        <script>
        var content=document.getElementById("content")
        var shadow=document.getElementById("shadow")
        var wrap=document.getElementById("wrap");
        var img=document.getElementById("bigImg");
        var bigContent=document.getElementById("bigContent");
         content.onmousemove=function(e){ 
            shadow.style.display="block"
            //block之前获取不到clientWidth,clientHeight,offsetWidth,offsetHeight
            // 解决方法一：
            // var maxwidth=content.clientWidth-shadow.clientWidth
            // var maxheight=content.clientHeight-shadow.clientHeight; 
            // 解决方法二：用window.getComputedStyle(shadow)
            var maxwidth=content.clientWidth-parseFloat(window.getComputedStyle(shadow).width);
            var maxheight=content.clientHeight-parseFloat(window.getComputedStyle(shadow).height);
            // console.log(parseFloat(window.getComputedStyle(shadow).width)) 
             var x=e.pageX-wrap.offsetLeft-shadow.clientWidth/2
             var y=e.pageY-wrap.offsetTop-shadow.clientHeight/2
            if(x<=0){
               x=0
            }
            if(y<=0){
               y=0
            }
            if(x>=maxwidth){
               x=maxwidth
            }
            if(y>=maxheight){
               y=maxheight
            }
           var bigX=x-(bigContent.clientWidth-shadow.clientWidth)/2
           var bigY=y-(bigContent.clientHeight-shadow.clientHeight)/2
           shadow.style.left=x+"px"
           shadow.style.top=y+"px"
           bigContent.style.left=bigX+"px"
           bigContent.style.top=bigY+"px"
           img.style.left=-2*x+"px"
           img.style.top=-2*y+"px"
         }
        </script>
</body>
</html>